<template>
  <div class="header-two">
    <div class="header-hm">
      <el-row type="flex" justify="space-between">
        <el-page-header content="添加角色" @back="fn" />
        <span style="float: right; padding: 3px 0" type="text">黑马管理员</span>
      </el-row>
    </div>
    <el-row type="flex">
      <div style="height: 300px;margin-right:300px">
        <el-steps :active="active" style="margin-top: 20px" direction="vertical">
          <el-step title="角色信息" />
          <el-step title="权限信息" />
          <el-step title="检查并完成" />
        </el-steps>
      </div>
      <div v-show="active===1" style="width:60%;margin-top:20px">
        <el-card>
          <div slot="header" class="clearfix">
            <span>角色信息</span>
          </div>
          <el-row type="flex" justify="center">
            <el-form ref="formRef" :model="formData" :rules="rules">
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formData.roleName" style="width:700px" />
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="formData.remark" type="textarea" style="width:700px" />
              </el-form-item>
            </el-form>
          </el-row>
        </el-card>

      </div>
      <div v-show="active===2" style="width:60%;margin-top:20px">
        <el-card>
          <!-- 添加时 -->
          <div v-if="!this.$route.params.id" class="roles_context">
            <div class="roles_tree">
              <div class="roles_treetitle">
                园区管理
              </div>
              <el-tree ref="one" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="parkingPermissionsList" :props="{label: 'title'}" @check-change="handleCheckChangeO" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                行车管理
              </div>
              <el-tree ref="two" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="carPermissionsList" :props="{label: 'title'}" @check-change="handleCheckChangeT" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                物业费管理
              </div>
              <el-tree ref="three" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="propertyPermissionsList" :props="{label: 'title'}" @check-change="handleCheckChangeR" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                一体杆管理
              </div>
              <el-tree ref="four" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="polePermissionsList" :props="{label: 'title'}" @check-change="handleCheckChangeF" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                系统管理
              </div>
              <el-tree ref="five" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="systemPermissionsList" :props="{label: 'title'}" @check-change="handleCheckChangeE" />
            </div>
          </div>
          <!-- 编辑时的 -->
          <div v-else class="roles_context">
            <div class="roles_tree">
              <div class="roles_treetitle">
                园区管理
              </div>
              <el-tree ref="one" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="parkingPermissionsList" :props="{label: 'title'}" @check-change="handleCheckChangeO" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                行车管理
              </div>
              <el-tree ref="two" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="carPermissionsList" :props="{label: 'title'}" :default-checked-keys="keys" @check-change="handleCheckChangeT" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                物业费管理
              </div>
              <el-tree ref="three" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="propertyPermissionsList" :props="{label: 'title'}" :default-checked-keys="keys" @check-change="handleCheckChangeR" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                一体杆管理
              </div>
              <el-tree ref="four" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="polePermissionsList" :props="{label: 'title'}" :default-checked-keys="keys" @check-change="handleCheckChangeF" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                系统管理
              </div>
              <el-tree ref="five" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="systemPermissionsList" :props="{label: 'title'}" :default-checked-keys="keys" @check-change="handleCheckChangeE" />
            </div>
          </div>
        </el-card>
      </div>
      <!-- 3 -->
      <div v-show="active===3" style="width:60%;margin-top:20px">
        <el-card>
          <div class="roles_context">
            <div class="roles_tree">
              <div class="roles_treetitle">
                园区管理
              </div>
              <el-tree ref="one" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="parkingPermissionsList" :props="{label: 'title',disabled:onFalse}" :default-checked-keys="checkedIdO" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                行车管理
              </div>
              <el-tree ref="two" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="carPermissionsList" :props="{label: 'title',disabled:onFalse}" :default-checked-keys="checkedIdT" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                物业费管理
              </div>
              <el-tree ref="three" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="propertyPermissionsList" :props="{label: 'title',disabled:onFalse}" :default-checked-keys="checkedIdR" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                一体杆管理
              </div>
              <el-tree ref="four" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="polePermissionsList" :props="{label: 'title',disabled:onFalse}" :default-checked-keys="checkedIdF" />
            </div>
            <div class="roles_tree">
              <div class="roles_treetitle">
                系统管理
              </div>
              <el-tree ref="five" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="systemPermissionsList" :props="{label: 'title',disabled:onFalse}" :default-checked-keys="checkedIdE" />
            </div>
          </div>
        </el-card>

      </div>
    </el-row>

    <div class="footer">
      <el-row type="flex" justify="center">
        <el-button v-show="active!==1" @click="active--">上一步</el-button>
        <el-button type="primary" @click="next">确定</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { addRoleAPI, getRoleIdAPI, permisionTreeAPI, putRoleAPI } from '@/api/role'
export default {
  data() {
    return {
      systemPermissionsList: [],
      parkingPermissionsList: [],
      carPermissionsList: [],
      propertyPermissionsList: [],
      polePermissionsList: [],
      active: 1,
      formData: {
        roleName: '',
        remark: '',
        perms: []

      },
      checkedIdO: [], // 用于存储被选中的节点 ID
      checkedIdT: [], // 用于存储被选中的节点 ID
      checkedIdR: [], // 用于存储被选中的节点 ID
      checkedIdF: [], // 用于存储被选中的节点 ID
      checkedIdE: [], // 用于存储被选中的节点 ID
      rules: {
        roleName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.loadRole()
    if (this.$route.params.id) {
      const res = await getRoleIdAPI(this.$route.params.id)
      this.formData = {
        roleName: res.data.roleName,
        remark: res.data.remark,
        perms: res.data.perms
      }
      this.keys = res.data.perms.flat()// 使用flat方法将二维数组转换为一维数组
      console.log(this.keys, '我是首次')
      // 强制更新
      this.$nextTick(() => {
        this.$refs.one.setCheckedKeys(this.keys)
        this.$refs.two.setCheckedKeys(this.keys)
        this.$refs.three.setCheckedKeys(this.keys)
        this.$refs.four.setCheckedKeys(this.keys)
        this.$refs.five.setCheckedKeys(this.keys)
      }, 0)
    }
  },
  methods: {
    handleCheckChangeO(data, checked, indeterminate) {
      if (checked) {
        // 如果节点被选中，将其 ID 添加到 checkedIds 数组中
        this.checkedIdO.push(data.id)
      } else {
        // 如果节点被取消选中，从 checkedIdsO 数组中移除其 ID
        const index = this.checkedIdO.indexOf(data.id)
        if (index !== -1) {
          this.checkedIdO.splice(index, 1)
        }
      }
    },
    handleCheckChangeT(data, checked, indeterminate) {
      if (checked) {
        // 如果节点被选中，将其 ID 添加到 checkedIds 数组中
        this.checkedIdT.push(data.id)
      } else {
        // 如果节点被取消选中，从 checkedIdsT 数组中移除其 ID
        const index = this.checkedIdT.indexOf(data.id)
        if (index !== -1) {
          this.checkedIdT.splice(index, 1)
        }
      }
    },
    handleCheckChangeR(data, checked, indeterminate) {
      if (checked) {
        // 如果节点被选中，将其 ID 添加到 checkedIds 数组中
        this.checkedIdR.push(data.id)
      } else {
        // 如果节点被取消选中，从 checkedIdsR 数组中移除其 ID
        const index = this.checkedIdR.indexOf(data.id)
        if (index !== -1) {
          this.checkedIdR.splice(index, 1)
        }
      }
    },
    handleCheckChangeF(data, checked, indeterminate) {
      if (checked) {
        // 如果节点被选中，将其 ID 添加到 checkedIds 数组中
        this.checkedIdF.push(data.id)
      } else {
        // 如果节点被取消选中，从 checkedIdsF 数组中移除其 ID
        const index = this.checkedIdF.indexOf(data.id)
        if (index !== -1) {
          this.checkedIdF.splice(index, 1)
        }
      }
    },
    handleCheckChangeE(data, checked, indeterminate) {
      if (checked) {
        // 如果节点被选中，将其 ID 添加到 checkedIds 数组中
        this.checkedIdE.push(data.id)
      } else {
        // 如果节点被取消选中，从 checkedIdsE 数组中移除其 ID
        const index = this.checkedIdE.indexOf(data.id)
        if (index !== -1) {
          this.checkedIdE.splice(index, 1)
        }
      }
    },
    // 返回上一页
    fn() {
      window.history.go(-1)
    },
    async next() {
      await this.$refs.formRef.validate()
      if (this.active === 2) {
        if (this.checkedIdO.length <= 0 && this.checkedIdT.length <= 0 && this.checkedIdR.length <= 0 && this.checkedIdF.length <= 0 && this.checkedIdE.length <= 0) {
          return this.$message.error('至少选中一个')
        } else {
          this.$nextTick(() => {
            this.$refs.one.setCheckedKeys(this.checkedIdO)
            this.$refs.two.setCheckedKeys(this.checkedIdT)
            this.$refs.three.setCheckedKeys(this.checkedIdR)
            this.$refs.four.setCheckedKeys(this.checkedIdF)
            this.$refs.five.setCheckedKeys(this.checkedIdE)
          }, 0)
        }
      }
      if (this.active === 3) {
        if (!this.$route.params.id) {
          await addRoleAPI({
            roleName: this.formData.roleName,
            remark: this.formData.remark,
            perms: [this.checkedIdO, this.checkedIdT, this.checkedIdR, this.checkedIdF, this.checkedIdE]
          })
          this.$message.success('新增成功')
        } else {
          await putRoleAPI({
            roleName: this.formData.roleName,
            remark: this.formData.remark,
            perms: [this.checkedIdO, this.checkedIdT, this.checkedIdR, this.checkedIdF, this.checkedIdE],
            roleId: this.$route.params.id
          })
          this.$message.success('修改成功')
        }
        this.fn()
      }
      this.active++
    },
    async loadRole() {
      const res = await permisionTreeAPI()
      this.parkingPermissionsList.push(res.data[0])
      this.carPermissionsList.push(res.data[1])
      this.propertyPermissionsList.push(res.data[2])
      this.polePermissionsList.push(res.data[3])
      this.systemPermissionsList.push(res.data[4])
      this.loading = false
    },
    onFalse() {
      return true
    }
  }
}
</script>

  <style scoped lang="scss">
    .header-hm{
      height: 64px;
      padding: 20px 10px;
      background-color: #fff;
    }
    .header-two{
        min-height: 100vh; /* 视口高度 */
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    background-color:#f4f5f6 ;
  }
  .footer{
  background-color: #fff;
    position: fixed; /* 或者使用 absolute，取决于你的需求 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 100%; /* 占据整个页面宽度 */
    height: 80px; /* 或者你想要的任何高度 */
    padding:20px 0;
    z-index: 9999; /* 确保元素显示在其他内容之上 */
  }
  .roles_context{
          width: 60%px;
          height: 80vh;
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .roles_tree{
            width: 20%;
            height: 400px;
            text-align: center;
            border-right: 1px solid #EEF0F3;
            &:last-child{
              border-right: none;
            }
            .roles_treetitle{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 90%;
              height: 42px;
              background-color: #F5F7FA;
              margin: 10px auto;
            }
          }
        }
  </style>
